<template>
   <!-- pzq，未完待续，暂时不能用 -->
  <div>
    <!-- 头部banner  播放中添加类目play-->
    <div class="course-banner play">
      <div class="banner-img">
        <img :src="img_url+banner" @error="this.src='../../assets/images/audiobanner.png'" alt="课程">
      </div>
      <div class="banner-video" style="display: none;">
        <audio
          id="playAudio"
          :src="playPath"
          @timeupdate="timeupdatex"
          ref="audio"
          @error="errorx"
          @canplaythrough="canplaythroughx"
          @ended="endedx"
          @pause="pausex"
          @play="playx"
        ></audio>
      </div>
    </div>
    
    <!--播放按钮-->
    <div class="audio">
      <div class="audio-title">
        <i class="icon-1" v-if="isPlay"></i>
        {{title}}
      </div>
      <div class="audio-controller">
        <mt-range
          v-model="rangeValue"
          @change="mtrangeChange"
          @touchstart="mtrangeTouchstart"
          class="audio-controller-progress"
          :barHeight="2"
        >
          <div slot="start">00:00</div>
          <div slot="end">00:00</div>
        </mt-range>

        <div class="audio-controller-play">
          <img
            src="/wechat../../assets/images/audio-left.png"
            v-on:click="changePlay(false)"
            alt="后退"
            class="audio-arrow"
          >
          <img
            :src="isPlay?'/wechat../../assets/images/audio-playing.png':'/wechat../../assets/images/audio-play.png'"
            v-on:click="sartPlay"
            alt="点击播放"
            class="audio-play"
          >
          <img
            src="/wechat../../assets/images/audio-left.png"
            v-on:click="changePlay(true)"
            alt="前进"
            class="audio-arrow"
            style="transform: rotate(180deg);"
          >

          <!--倍速播放-->
          <div class="audio-speed" v-on:click="multiple">
            <p class="speed-num">{{magnification}}x</p>
            <span class="speed-text">倍速播放</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    banner: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    id: {
      type: Number,
      default: 0
    },
    chapter: {
      type: Array,
    },
    // 当前播放的音频id
    playAudioId: {
      type: String,
    }
  },
  data() {
    return {
      isPlay: false, //是否在播放
      palyTime: 0 //学习计时
    };
  },
  computed: {
    ...mapState(["img_url"])
  },
  methods: {
    // audio 事件
    canplaythroughx() {
      let audio = this.$refs.audio;
      audio.play();
    },
    endedx() {
      this.insertRecord();
    },
    errorx() {
      this.$messageBox("无法播放音频");
      this.palyTime = 0;
      this.isPlay = false; //标记暂停
      clearInterval(this.timerObj); //暂停计时
    },
    pausex() {
      this.isPlay = false; 
      clearInterval(this.timerObj); 
    },
    playx() {
      this.isPlay = true; //标记播放视频
      this.startTime(); //继续计时
    },
    // mt-range
    mtrangeChange() {
      this.touchstart = false;
      let audio = this.$refs.audio;
      audio.currentTime = (this.rangeValue / 100) * audio.duration;
    },
    mtrangeTouchstart() {
      // 触碰阶段，不允许音频事件控制时间
      this.touchstart = true;
    },
    timeupdatex() {
      if (this.touchstart) return;
      let audio = this.$refs.audio;
      this.rangeValue = parseInt((audio.currentTime / audio.duration) * 100);
    },

    
    /**
     * 插入学习记录
     * */
    insertRecord() {
      //视频播放时间
      let audio = this.$refs.audio;
      this.$nextTick(() => {
        let playTime = audio.currentTime;
        updateRecord({
          course_id: this.id,
          type: "audio",
          aid: this.playAudioId,
          long_time: this.palyTime,
          study_time: playTime
        }).then(res => {});
      });
    },
    /**
     * 开始计时
     **/
    startTime() {
      this.timerObj = setInterval(() => {
        this.palyTime++;
        if (this.palyTime % 30 === 0) {
          this.insertRecord();
        }
      }, 1000);
    },
    
    /**
     * 音视频单击次数统计
     **/
    access_statistical() {
      accessStatistical({
        course_id: this.id,
        type: "audio",
        type_id: this.playAudioId
      }).then(res => {});
    },
    /**
     * 插入学习记录
     * */
    insertRecord() {
      let audio = this.$refs.audio;
      //视频播放时间
      this.$nextTick(() => {
        let playTime = audio.currentTime;
        updateRecord({
          course_id: this.id,
          type: "audio",
          aid: this.playAudioId,
          long_time: this.palyTime,
          study_time: playTime
        }).then(res => {});
      });
    },
    /**
     * 倍数播放
     **/
    multiple() {
      let m = parseFloat(this.magnification);
      m = m + 0.5;
      if (m > 2) {
        m = 0.5;
      }
      // alert(m);
      this.magnification = m;
      this.setMultiple();
    },
    /**
     * 设置倍率并播放
     **/
    setMultiple() {
      let audio = this.$refs.audio;
      let current = audio.currentTime;
      audio.playbackRate = this.magnification;
    },
    /**
     * 播放与暂停
     **/
    sartPlay() {
      let audio = this.$refs.audio;
      alert(audio.paused);
      if (audio.paused) {
        //已暂停
        alert(audio.readyState);
        if (audio.readyState === 4) {
          //准备就绪,可以播放
          audio.play();
        } else {
          if (this.cur_channel.id > 0) {
            //存在播放记录
            for (var i in this.chapter) {
              if (this.chapter[i].id === this.cur_channel.id) {
                this.playKey = i;
                this.setPlayInfo({
                  id: this.chapter[i].id,
                  title: this.chapter[i].title,
                  src: this.chapter[i].transcoding_path
                });
                return false;
              }
            }
          }
          //按照key获取播放的音频第一个
          let data = this.chapter[this.playKey];
          this.setPlayInfo({
            id: data.id,
            title: data.title,
            src: data.transcoding_path
          });
        }
      } else {
        //正在播放
        audio.pause();
      }
    },
    /**
     * 播放列表切换
     **/
    changePlay(t) {
      let i = parseInt(this.playKey);
      if (t) {
        //下一个
        if (i + 1 >= this.chapter.length) {
          this.playKey = 0;
        } else {
          this.playKey++;
        }
      } else {
        //上一个
        if (i - 1 < 0) {
          this.playKey = this.chapter.length - 1;
        } else {
          this.playKey--;
        }
      }
      //设置播放
      this.setPlayInfo({
        id: this.chapter[this.playKey].id,
        title: this.chapter[this.playKey].title,
        src: this.chapter[this.playKey].transcoding_path
      });
      clearInterval(this.timerObj); //重新计时
    },








    /**
     * 音频播放时间换算
     * @param {number} value - 音频当前播放时间，单位秒
     */
    transTime(value) {
      var time = "";
      var h = parseInt(value / 3600);
      value %= 3600;
      var m = parseInt(value / 60);
      var s = parseInt(value % 60);
      if (h > 0) {
        time = formatTime(h + ":" + m + ":" + s);
      } else {
        time = formatTime(m + ":" + s);
      }
      return time;
    },
    /**
     * 格式化时间显示，补零对齐
     * eg：2:4  -->  02:04
     * @param {string} value - 形如 h:m:s 的字符串
     */
    formatTime(value) {
      var time = "";
      var s = value.split(":");
      var i = 0;
      for (; i < s.length - 1; i++) {
        time += s[i].length == 1 ? "0" + s[i] : s[i];
        time += ":";
      }
      time += s[i].length == 1 ? "0" + s[i] : s[i];
      return time;
    },
  },
  /**
   * 实例销毁之前调用
   **/
  beforeDestroy() {
    //保存最后一次学习记录
    this.insertRecord();
  }
};
</script>


<style scoped lang="scss">
/*头部banner*/
.course-banner {
  height: 2.1rem;
  .banner-img {
    width: 100%;
    img {
      width: 100%;
      height: 2.1rem;
    }
  }
  .banner-video {
    width: 100%;
    height: 2.1rem;
    display: none;

    video {
      width: 100%;
      height: 2.1rem;
    }
  }
  .banner-mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    width: 100%;
    height: 2.1rem;

    .play-icon {
      width: 0.44rem;
      height: 0.44rem;
      background-position: -3.03rem -0.88rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -0.22rem 0 0 -0.22rem;
    }
  }
}

.course-banner.play {
  .banner-img {
    display: inline-block;
    top: 0;
    position: absolute;
  }

  .banner-mask {
    display: none;
  }

  .banner-video {
    display: block;
  }
}

.audio {
  width: 100%;
  background: #fff;
  margin-bottom: 6px;
  padding: 12px 0;
  &-title {
    color: #606266;
    font-size: 12px;
    height: 0.17rem;
    line-height: 0.17rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-controller {
    &-progress {
      margin-top: 0.12rem;
      color: #909399;
      font-size: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px;
      margin-bottom: 15px;
      /deep/ {
        .mt-range-content {
          margin: 0 15px;
          flex: auto;
        }
        .mt-range-runway {
          background: #eeeeee;
          height: 2px;
          width: 100%;
          border: none;
        }
        .mt-range-progress {
          background: linear-gradient(#04b9fe, #0486fe);
          width: 0;
          height: 2px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        .mt-range-thumb {
          width: 30px;
          height: 30px;
          top: -15px;
          display: block;
          background: #0486fe;
          background: url("../../assets/images/20190213174020.png") no-repeat
            center/contain;
          border-radius: 50%;
          transform: translateX(-15px);
          box-shadow: none;
        }
      }
      .barx {
        background: #eeeeee;
        height: 2px;
        width: 75%;
        position: relative;
        &-bar {
          position: relative;
          left: 0;
          top: 0;
          background: linear-gradient(#04b9fe, #0486fe);
          width: 0;
          height: 2px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        &-dot {
          position: absolute;
          top: -19px;
          left: 0;
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          span {
            display: block;
            width: 12px;
            height: 12px;
            background: #0486fe;
            border: 4px solid rgba(4, 134, 254, 0.2);
            border-radius: 50%;
          }
        }
      }
    }
    &-play {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .audio-arrow {
        width: 30px;
        height: 25px;
        margin: 0 40px;
      }
      .audio-play {
        display: block;
        width: 40px;
        height: 40px;
      }
      .audio-speed {
        position: absolute;
        right: 15px;
        text-align: center;
        .speed-num {
          font-size: 12px;
          color: #0486fe;
          line-height: 12px;
        }
        .speed-text {
          font-size: 10px;
          color: #c0c4cc;
        }
      }
    }
  }
}

.icon-1 {
  width: 0.14rem;
  height: 0.14rem;
  background: url("../../assets/images/playing.gif") no-repeat center/cover;
  display: inline-block;
  margin-right: 5px;
}
</style>
